<template>
	<view class="index-details" ref="uv-back-top">
		<headers v-if="isPc" @custom-event="e => state = e"></headers>
		<uv-navbar v-if="!isPc" title="详情" leftIcon="" rightText="" :placeholder="true">
			<template v-slot:left>
				<view class="uv-nav-slot">
					<uv-icon name="arrow-left" size="19" @click="navigateBack"></uv-icon>
					<uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line>
					<uv-icon name="home" size="20" @click="routed('/')"></uv-icon>
				</view>
			</template>
		</uv-navbar>
		<el-container style="display: flex;padding: 0px;margin: 0px;">
			<view :style="'width: '+asideW+'px !important;'">
				<view :style="'width: '+asideW+'px !important;opacity: 0;'"></view>
				<asides style="position: absolute;width: 60px;" :asideW="asideW" :aside="aside"></asides>
			</view>
			<view style="width: 100%;;display: flex;justify-content: center;">
				<view style="height: calc(100vh - 50px);overflow: auto;">
					<view v-if="data[0]" class="contents-conter">
						<view class="contents-details"
							:style="adjustColumn&&adjustColumn.width<800?'flex-wrap: wrap;':'flex-wrap: nowrap;'">
							<view :class="screen?'middle-reht':'middle-reht middle-reht_Os'">
								<view style="display: flex;justify-content: space-between;margin-bottom:5px;">
									<view style="display: flex;justify-content: flex-start;align-items: center;">
										<view style="margin-right: 20px;cursor: pointer;" @click="navigateBack">
											<uv-icon name="/static/return.svg" color="#2979ff"
												:size="isPc?28:22"></uv-icon>
										</view>
										<links style="margin-right: 20px;border-radius: 50px;border: 1px solid #ffff;"
											:iconStyle="isPc?'font-size: 28px;':'font-size: 22px;'" icon="attach"
											title="链接" v-model="data[0]">
										</links>
										<sharePoster style="" iconStyle="font-size: 28px;" title="" prefixIcon="share"
											v-model="data[0]"></sharePoster>
									</view>

									<view style="display: flex;justify-content: flex-end;align-items: center;">
										<uv-button v-if="dataDetails[1]" class="btn" size="small"
											@click="dialogVisible = true" type="info">
											<view style="color:#000;font-weight: bold;">提示词</view>
										</uv-button>
										<uv-button
											v-if="!ifShow(data[0])&&(data[0].type=='fusion'||(swiperCurrent+1)<=uv_image(data[0].content[0]).length)"
											size="small" class="btn"
											@click="routed('/pages/'+data[0].type+'/index?id='+data[0].sid)" type="info"
											text="一键同款"></uv-button>
										<uv-button v-if="data[0].type!='fusion'" class="btn" size="small"
											@click="download(forContent(data[0].content[0])[swiperCurrent])" type="info"
											text="下载"></uv-button>
										<uv-button v-else class="btn" size="small"
											@click="copy(stripHtml(data[0].content[0]))" type="info"
											text="复制文字"></uv-button>
									</view>
								</view>
								<view style="opacity: 0;height: 0px;">
									<uv-text lines="1" :text="fill"></uv-text>
								</view>
								<mp-html v-if="data[0].type=='fusion'&& !(['image','video'].includes(data[0].task.api))"
									container-style="height: auto;overflow-y: auto;white-space:pre-wrap"
									style="height: calc(100vh - 140px);overflow-y: auto;margin: 0px 1em;"
									:content="handleHtmls(data[0].content[0])" />
								<view v-else>
									<view v-for="(item, index) in handContent(data[0]) " :key="index">
										<uv-swiper style="background-color: #f9f9f9;" height="calc(100vh - 140px)"
											:list="forContent(item)" keyName="url" :autoplay="autoplay" indicator
											indicatorStyle="bottom:55px" indicatorMode="line" circular
											imgMode="aspectFit" @change="swiperChange"
											@click="previewImage(item,swiperCurrent)" :current="swiperCurrent"
											@pause="史蒂芬史格">
											<template v-slot:indicator>
												<view class="indicator_ss">
													<view class="indicator__dot"
														v-for="(fdhd, idds) in forContent(item)"
														@click="swiperCurrent=idds" :key="idds"
														:class="[idds === swiperCurrent && 'indicator__dot--active']">
													</view>
												</view>
											</template>
										</uv-swiper>
									</view>
								</view>
								<view style="display: flex;justify-content: center;">
									<view
										:style="data[0].type!='fusion'?'display: flex;margin-top: 5px;':'display: flex;margin-top: 5px;opacity: 0;'">
										<view
											style="border-radius: 10%;padding: 2px 4px 2px 3px;border: 1px solid #ccc;cursor: pointer;">
											<uv-icon size="22" name="play-left-fill" @click="swiperCurrent--"></uv-icon>
										</view>
										<view
											style="margin-left: 10px;border-radius: 10%;padding: 2px 3px 2px 4px;border: 1px solid #ccc;cursor: pointer;">
											<uv-icon size="22" name="play-right-fill"
												@click="swiperCurrent++"></uv-icon>
										</view>
									</view>
								</view>
							</view>
							<view :class="screen?'middle-dhrds':'middle-dhrds middle-dhrds_Os'">
								<view style="border-radius: 10px;border:1px solid #ddd;overflow: hidden;">
									<view style="padding:10px;">
										<uv-text class="one-line-omit" align="left" v-if="data[0].name" bold size="20"
											:text="data[0].name">11</uv-text>
										<uv-text v-else style="opacity: 0;" align="left" bold size="20"
											text="null"></uv-text>
									</view>
									<view style="padding: 0px 10px;background-color: #fafafa;">
										<view style="display: flex;justify-content: space-between;margin-bottom:0px;">
											<view
												style="display: flex;justify-content: flex-start;align-content: center;">
												<uv-icon labelSize="14" style="margin-right: 20px;cursor: pointer;"
													size="30" name="chat" @click="current=1"></uv-icon>
												<!-- :label="total" -->
												<uv-icon labelSize="14" style="margin-right: 20px;cursor: pointer;"
													size="20" :name="data[0].favoriteStatus?'star-fill':'star'"
													@click="favorites(data[0])"></uv-icon>
												<!-- :label="data[0].favorites||0" -->
												<uv-icon labelSize="14" style="margin-right: 20px;cursor: pointer;"
													size="20" :name="data[0].likeStatus?'thumb-up-fill' : 'thumb-up'"
													@click="heartlike(data[0])"></uv-icon>
												<!-- :label="data[0].likes||0" -->
												<!-- <uv-icon labelSize="14" :label="Number(flowRecords)||0"
														style="display: flex;justify-content: flex-start;align-content: center;margin-right: 20px;cursor: pointer;"
														size="20" name="eye"></uv-icon> -->
											</view>
											<view style="display: flex;justify-content: flex-end;align-items: center;">
												<uv-button
													style="margin-left: 5px;width: 78px;height: 24px;font-weight: bold;"
													size="small" @click="" type="info" text="一键入群"></uv-button>
											</view>
										</view>
									</view>
									<view v-if="dataDetails[0]"
										style="width: auto;padding-left:10px;background-color: #f1f1f1;width: auto;display: flex;justify-content: space-between;align-items: center;">
										<uv-text :lines="dataMore?100:1" :text="dataDetails[0]" color="#999999"
											size="12px"></uv-text>
										<view
											style="cursor: pointer;display: flex;justify-content: flex-end;align-items: center;font-size: 14px;">
											<view :style="'padding: 0px 5px;'" @click="dataMore = !dataMore">
												<i v-if="dataMore" style="font-size: 16px;color:#666666"
													class="el-icon-arrow-down"></i>
												<i v-else style="font-size: 16px;color:#666666"
													class="el-icon-arrow-left"></i>
											</view>
										</view>
									</view>
									<view v-if="data[0].des" style="padding: 0px 10px;background-color: #eaeaea;">
										<view style="display: flex;justify-content: space-between;margin-bottom:0px;">
											<view
												style="overflow:hidden;width: auto;display: flex;justify-content: flex-start;align-content: center;align-items: center;"
												class="one-line-omit">
												<view v-if="data[0].link&&data[0].link[0]&&data[0].link[0].url"
													style="display: flex;justify-content: flex-start;">
													<view v-for="(item,index) in data[0].link" :key="index"
														style="margin-right:5px;">
														<uv-button v-if="isApp" style="color:#000;font-size: 15px;"
															size="mini" shape="circle" type="info" :text="item.title"
															@click="routed(item.url)">
														</uv-button>
														<el-link v-else
															style="color:#ff55ff;background-color: #fff;border:1px solid #ff55ff;border-radius: 10px;font-size: 12px;padding:2px 10px 3px"
															:underline="false" :href="item.url"
															target="_blank">{{item.title}}</el-link>
													</view>
												</view>
											</view>
											<view
												style="margin: 5px 0px;display: flex;justify-content: flex-end;align-items: center;">
												<uv-button
													style="color:#000;font-size: 15px;margin-left: 10px;font-weight: bold;"
													size="mini" shape="circle" @click="copy(stripHtml(data[0].des))"
													type="info" text="复制"></uv-button>
												<uv-button
													style="color:#000;font-size: 15px;margin-left: 10px;font-weight: bold;"
													size="mini" shape="circle" @click="" type="info"
													text="笔记"></uv-button>
											</view>
										</view>
									</view>

									<view style="position: relative;">
										<view style="height:calc(100vh - 230px);overflow: auto;">
											<view v-show="current==0">
												<view v-if="data[0]&&data[0].tags&&data[0].tags[0]"
													style="display: flex;justify-content: space-between;margin:0px 10px;">
													<view :class="tagMore?'':'one-line-omit'">
														<view
															style="display: inline-block;margin-right: 15px;margin-bottom: 6px;"
															v-for="(name, index) in data[0].tags " :key="index">
															<uv-text type="info" :text="'#'+name"></uv-text>
														</view>
													</view>
													<view
														style="cursor: pointer;display: flex;justify-content: flex-end;align-items: center;font-size: 14px;">
														<view style="padding: 0px 5px;color:#66666"
															@click="tagMore = !tagMore">
															<i v-if="tagMore" style="font-size: 16px;color:#909399"
																class="el-icon-arrow-down"></i>
															<i v-else style="font-size: 16px;color:#909399"
																class="el-icon-arrow-left"></i>
														</view>
													</view>
												</view>
												<view
													v-if="(data[0].type=='fusion'&&data[0].task.api!='article')||data[0].des"
													style="margin:0px 10px;">
													<mp-html container-style="white-space:pre-wrap"
														style="overflow: auto;margin:  0px;"
														:content="handleHtmls(data[0].des||data[0].content[0])" />
												</view>

												<view
													:class="isPc?'comment-page_dummy dummyPc':'comment-page_dummy dummyOs'">
													<view class="page-header">
														<text class="title">用户评论</text>
														<text class="count">({{ total }}条)</text>
													</view>
													<view class="comment-input-box" @click="current = 1;">
														<image :src="vuex_user.portrait" class="user-avatar"></image>
														<input v-model="newComment" class="input" placeholder="说点什么吧..."
															placeholder-class="placeholder" maxlength="200" />
														<button class="submit-btn">发送</button>
													</view>
												</view>
												<view class="rating">
													<view style="font-size: 13px;">评分：</view> <el-rate
														v-model="rated"></el-rate>
												</view>
											</view>
											<comment v-show="current==1" :userInfo="userinfo" :taskid="taskid"
												:title="'对话'" :assembly="false" :autoFocus="autoFocus" @submit="getVuex"
												@total="e=>total=e" @revert="current=0">
											</comment>
											<view v-show="current==2"
												style="width: 100%;padding:5px;display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
											</view>
										</view>
										<view
											style=";display: flex;justify-content: space-between;align-items: center;cursor: pointer;background-color: #eee;border: 0px;;">
											<view :class="current==0?'acting':'acted'" @click="current=0">描述</view>
											<view :class="current==1?'acting':'acted'" @click="current=1">评论</view>
											<view :class="current==2?'acting':'acted'" @click="current=2">
												<uv-icon labelSize="12"
													style="margin-right: 10px;cursor: pointer;padding:4px 6px" size="16"
													name="more-dot-fill"></uv-icon>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view :class="screen?'middle-treef':'middle-treef middle-treef_Os'">
								<view class="middle-card">
									<view style="display: flex;justify-content: flex-start;">
										<uv-image shape="circle" :src="userinfo.portrait" width="45" height="45">
											<template v-slot:loading>
												<uv-loading-icon color="red"></uv-loading-icon>
											</template>
										</uv-image>
										<view style="margin-left:8px;">
											<uv-text size="16" :text="userinfo.nickname"></uv-text>
											<uv-text size="13"
												:text="$uv.timeFormat(data[0].updatedAt,'yyyy-mm-dd hh:MM')"
												customStyle="color:#A1A1A1;"></uv-text>
										</view>
									</view>
									<view style="margin-top: 8px;">
										<uv-text color="#ccc" size="12" :text="userinfo&&userinfo.blurb"></uv-text>
									</view>
									<view class="item_box">
										<view class="item_dfgd">
											<view style="color: #55ff00;font-size: 12px;">64</view>
											<view style="font-size: 12px;">关注</view>
										</view>
										<view class="item_dfgd">
											<view style="color: #55ff00;font-size: 12px;">4.4万</view>
											<view style="font-size: 12px;">点赞</view>
										</view>
									</view>
									<view
										style="margin-top: 8px;display: flex;justify-content: space-between;align-items: center;">
										<uv-button style="font-weight: bold;" size="small" @click="" type="info"
											text="打赏"></uv-button>
										<uv-button style="font-weight: bold;" size="small" @click="" type="info"
											text="私信"></uv-button>
										<uv-button style="font-weight: bold;" size="small" @click="" type="info"
											text="关注"></uv-button>
									</view>
									<view style="margin-top: 8px;">
										<uv-button size="small">
											<view
												style="display: flex;justify-content: flex-start;align-items: center;">
												<uv-icon name="server-man" size="16"></uv-icon>群聊
												<!-- <uv-text text="群聊"></uv-text> -->
											</view>
										</uv-button>
									</view>
								</view>
								<view v-for="(item,index) in adv" :key="index" class="middle-adv">
									<el-image style="width: 100%; height: auto;border-radius: 6px;"
										:src="item.url"></el-image>
									<uv-text :lines="1" :text="item.text"></uv-text>
								</view>

								<!-- <view v-if="data[0]">
										<waterfall :disabled="true" :userId="data[0].id" :newColumnCount="1" size="2"
											style="width: auto;margin-top: 8px;height: auto;">
										</waterfall>
									</view> -->
							</view>
						</view>
					</view>

					<view v-else-if="!loading" class="in-content">
						<view class="in-item">
							<uv-row justify="center" customStyle="margin-bottom: 10px">
								<el-result icon="fail" title="数据为空">
									<template slot="extra">
										<el-button type="primary" size="medium" @click="navigateBack">返回</el-button>
									</template>
									<template slot="subTitle">
										<view
											style="display: flex; justify-content: flex-start; font-size: 15px; align-items: center;">
											<uv-count-down :time="6 * 1000" format="ss"></uv-count-down>秒后，自动跳转
										</view>
									</template>
								</el-result>
							</uv-row>
						</view>
					</view>
					<view class="con_waterfall">
						<waterfall ref="waterfall" style="width: 1500px;margin-top: 10px;height: auto;">
						</waterfall>
					</view>
					<view style="cursor: pointer;">
						<el-backtop></el-backtop>
						<uv-back-top :scroll-top="scrollTop"></uv-back-top>
					</view>
				</view>
			</view>

		</el-container>
		<el-dialog title="提示词" :visible.sync="dialogVisible" :width="isPc?'80%':'99%'">
			<view class="">{{dataDetails[1]}}</view>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
			</span>
		</el-dialog>
		<!-- @finish="navigateBack" -->
		<!-- <el-backtop :visibility-height="500"></el-backtop> -->
		<tabbars :prop-value="'mapping'"></tabbars>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import waterfall from '@/components/waterfall/waterfall.vue';
	import headers from '@/components/header/header.vue';
	import asides from '@/components/aside/aside.vue';
	import comment from '@/components/comment/comment.vue';
	import tabbars from '@/components/tabbar/tabbar.vue';
	import sharePoster from '@/components/sharePoster/sharePoster.vue';
	import links from '@/components/links/links.vue';
	import {
		convertImgStylesToAttributes,
		handleHtmlWithVideo
	} from '@/uni_modules/sp-editor/utils'
	import config from '@/common/config';
	import {
		getName,
		getScroll,
		getFlowName,
		flowRecords,
		getFlowRecords,
		like,
		favorite,
		userName,
		getUserName
	} from '@/common/api.js';
	import {
		uv_image,
		download
	} from '@/common/fun.js';
	export default {
		components: {
			tabbars,
			headers,
			sharePoster,
			waterfall,
			comment,
			links,
			asides
		},
		data() {
			return {
				env: config.env,
				fill: config.fill,
				loginUrl: config.loginUrl,
				aside: true,
				asideW: 60,
				scrollTop: 0,
				tooltip: '图片、视频、音乐等在有效期限制，请尽快下载',
				show: true,
				state: '',
				userinfo: {},
				tabbarsValue: '',
				aicurrent: 0,
				loading: true,
				taskid: '',
				data: [],
				flowRecords: 0,
				swiperCurrent: 0,
				works: 0,
				adjustColumn: null,
				autoplay: false,
				sublist: ['描述', '聊天'],
				current: 0,
				nOarr: [""],
				tagMore: false,

				shareShow: false,
				hover: false,
				shareIndex: false,
				typed: {
					article: '文章'
				},
				dataMore: false,
				total: 0,
				newComment: '',
				autoFocus: false,
				dialogVisible: false,
				rated: 0,
				adv: [{
					url: "https://picsum.photos/seed/1h8HPmJxrsMzmDDRANXUuN5uM4Nfmm8F/218/290",
					text: '广告，广告，还是广告',
				}, {
					url: "https://picsum.photos/seed/1h8HPmJxrsMzmDDRANXUuN5uM4Nfmm8F/218/290",
					text: '广告，广告，还是广告',
				}]
			};
		},
		mounted() {
			// this.$refs.uToast.clearTimer()
			// this.$refs.uToast.hide()
			this.adjustColumnCount();
			const that = this;
			uni.onWindowResize((res) => {
				const _this = this; // 保存组件实例的引用
				uni.$uv.debounce(() => _this.adjustColumnCount(), 300);
			});
		},
		async onReachBottom() {
			this.$refs.waterfall.loadMore();
			// 在这里加载更多数据
		},
		watch: {
			current(newVal, oldVal) {
				if (newVal == 1) {
					this.autoFocus = true
				} else {
					this.autoFocus = false
				}
			},
		},
		computed: {
			shadowStyle() {
				return {
					// #ifndef APP-NVUE
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					// #endif
					// #ifdef APP-NVUE
					backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
					// #endif
					paddingTop: "100px",
					marginTop: "-100px"
				};
			},
			dataDetails() {
				let file = '',
					content = null,
					teng = null,
					e = this.data[0];
				if (!e) {
					return [file, content];
				}
				file = file + '发布时间：' + this.$uv.timeFormat(e.updatedAt, 'yyyy-mm-dd hh:MM') + '，';
				if (e.type == 'painting') {
					file = file + '类型：图片';
					var sapi = e?.task?.api;
					if (sapi == 'generate') {
						file = file + '，工具：Flux';
						if (e?.content[0].mode) {
							file = file + '，模型：' + e.content[0].mode;
						}
						if (e?.content[0].size) {
							file = file + '，比例：' + e.content[0].size;
						}
					} else if (sapi == 'openai') {
						file = file + '，工具：Dalle';
						if (e?.task?.taskInfo?.model) {
							file = file + '，模型：' + e.task.taskInfo.model;
						}
						var quality = {
							standard: "标准",
							hd: "增强细节"
						};
						if (e?.task?.taskInfo?.quality) {
							file = file + '，质量：' + quality[e?.task?.taskInfo?.quality];
						}
						if (e?.task?.taskInfo?.size) {
							file = file + '，比例：' + e?.task?.taskInfo?.size;
						}
					} else if (sapi == "imagine") {
						file = file + '，工具：Midjourney';
						var modes = {
							relax: "一般",
							fast: "快速",
							turbo: "最快"
						};
						if (modes[e?.task?.taskInfo?.mode]) {
							file = file + '，速度：' + modes[e?.task?.taskInfo?.mode];
						}
						if (this.analysis(e?.task?.taskInfo?.prompt)) {
							file = file + '，模型：' + this.analysis(e?.task?.taskInfo?.prompt);
						}

					} else if (sapi == 'generations') {
						file = file + '，工具：Gpt';
					}

				} else if (e.type == 'video') {
					file = file + '类型：视频';
				} else if (e.type == "music") {
					file = file + '类型：音乐';
					if (e.content[0].mv) {
						file = file + '，模型：' + e.content[0].mv;
					}
					if (e?.content[0]?.musics[0]?.duration) {
						file = file + '，时长：' + this.format_duration(e.content[0].musics[0].duration);
					}
				} else if (e.type == "fusion") {
					file = file + '类型：聚合-' + this.typed[e.task.api];
					if (this.typed[e.task.api] == '文章') {
						file = file + '，文章总数：' + this.countTextWords(e?.content[0]);
					}
				} else {
					file = file + '类型：未知';
				}
				if (e?.content[0]?.width) {
					file = file + '，比例：' + e.content[0].width + 'x' + e.content[0].width;
				}
				if (e.content[0]?.userPrompt && e.content[0]?.videoUrl) {
					content = e.content[0].userPrompt;
				}
				if (e.type != 'fusion') {
					if (e.content[0].revised_prompt && e.content[0].url) {
						content = e.content[0].revised_prompt;
					}
					if (e.content[0]?.data && e.content[0].data[0]) {
						content = e.content[0].data[0].revised_prompt
					}
					if (e.content[0].prompt) {
						content = e.content[0].prompt;
					}
					if (e.content[0]?.musics) {
						content = e.content[0].musics[0].prompt;
					}
				}
				if (content && content.includes(' --')) {
					const msgs = content.split(' --');
					if (msgs[0].includes('http')) {
						var arr = msgs[0].split(' ');
						this.urliw = [{
							url: arr[0]
						}];
						content = msgs[0].replace(arr[0] + ' ', '');
					} else {
						content = msgs[0];
					}
					teng = msgs[1]
				}

				return [file, content, teng];
			}
		},
		onPageScroll(e) {
			console.log(e);
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		onLoad(ee) {
			if (ee && ee.id) {
				this.ress(ee.id);
				if (ee.type == 'article') {
					this.getVuex(ee.id);
				}
				getFlowRecords({
					custom: {
						auth: true,
						toast: false
					},
					params: {
						fid: ee.id,
						userId: this.vuex_user?._id || null
					}
				}).then(e => {
					if (e) this.flowRecords = e;
				}).catch(e => {
					console.error(e);
				});

				flowRecords({
					fid: ee.id
				}, {
					custom: {
						auth: true,
						toast: true
					}
				}).then(e => {}).catch(e => {
					console.error(e);
				});
			}
			if (ee && ee.inviteCode) {
				this.$uv.vuex('inviteCode', ee.inviteCode);
			}
			this.getWorks();
		},
		methods: {
			download,
			uv_image,
			handContent(e) {
				if (e.type == "fusion" && e.custom[0]) {
					return [{
						type: 'fusion'
					}];
				}
				return e.content;
			},
			handleHtmls(e) {
				return handleHtmlWithVideo(e);
			},
			follow() {
				a.favoriteStatus = !a.favoriteStatus;
				userName('follow', {
					id: a._id
				}, {
					custom: {
						auth: true,
						toast: true
					}
				}).then(e => {
					if (e.status) {
						a.favorites = Number(a.favorites || 0) + 1;
					} else {
						a.favorites--;
					}
					a.favoriteStatus = e.status;
					this.$refs.toast.show({
						message: e.status ? '收藏成功' : '取消收藏'
					});
				}).catch(e => {
					console.error(e);
				});
			},
			analysis(e) {
				if (!e) return;
				var str = ['--v'];
				const array = e.split(' ');
				for (var i = 0; i < array.length; i++) {
					if (str.includes(array[i])) {
						return array[i + 1];
					}
				}
			},
			countTextWords(htmlStr) {
				if (!htmlStr) return 0; // 处理空字符串情况
				// 1. 去除所有HTML标签（匹配<>及其中内容，替换为空）
				const cleanText = htmlStr.replace(/<[^>]*>/g, '');
				// 2. 去除所有空白字符（空格、换行、制表符等）
				const noSpaceText = cleanText.replace(/\s+/g, '');
				// 3. 返回有效字符长度（即字数）
				return noSpaceText.length;
			},
			forContent(item) {
				let data = this.uv_video(item, this.data[0].custom, this
					.data[0].type, this.data[0].task?.api)[0] ? this.uv_video(item, this.data[0].custom, this
					.data[0].type, this.data[0].task?.api) : this.uv_image(item, this.data[0].custom, this
					.data[0].type);
				return data;
			},
			rgrea(e) {
				if (this.shareShow == false) {
					this.hover = true;
				}
				var that = this;
				setTimeout(function() {
					that.shareIndex = true;
				}, 500);
			},
			rgre(e) {
				this.shareIndex = false;
				if (this.shareShow) return;
				this.hover = false;
			},
			ifShow(item) {
				if (this.nOarr.includes(item.type.toLowerCase())) {
					return true;
				}
				if (this.nOarr.includes(item.task.api.toLowerCase())) {
					return true;
				}
				return false
			},
			subchange(index) {
				this.current = index;
			},
			adjustColumnCount() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.index-details').boundingClientRect(data => {
					if (data) {
						this.adjustColumn = data;
					}
				}).exec();
			},
			swiperChange(e) {
				this.swiperCurrent = e.current;
			},
			// 点击轮播项触发预览
			previewImage(e, i) {
				let data = this.uv_video(e, this.data[0].custom, this
					.data[0].type, this.data[0].task?.api)[0] ? null : this.uv_image(e, this.data[0].custom, this
					.data[0].type);
				if (data) {
					uni.previewImage({
						urls: data,
						current: i
					});
				}

			},
			stripHtml(html) {
				if (!html) return '';
				// 1. 将换行标签转换为换行符
				html = html.replace(/<br\s*\/?>/gi, '\n');
				// 2. 将段落结束标签转换为换行符（可选）
				html = html.replace(/<\/p>/gi, '\n');
				// 3. 移除所有其他HTML标签
				html = html.replace(/<[^>]+>/g, '');
				// 4. 替换HTML实体
				html = html
					.replace(/&nbsp;/gi, ' ') // 空格
					.replace(/&amp;/gi, '&') // &符号
					.replace(/&lt;/gi, '<') // 小于号
					.replace(/&gt;/gi, '>') // 大于号
					.replace(/&quot;/gi, '"') // 双引号
					.replace(/&#39;/gi, "'"); // 单引号
				// 5. 处理多余的空格和换行
				html = html
					// .replace(/\s+/g, ' ') // 合并多余空格
					// .replace(/\n /g, '\n') // 移除换行后的空格
					// .replace(/ \n/g, '\n') // 移除换行前的空格
					.replace(/\n{3,}/g, '\n\n') // 限制连续换行数量
					.trim(); // 移除首尾空白
				return html;
			},
			copy(text) {
				var that = this;
				// console.log(text);
				if (typeof text !== 'string') {
					text = text[0].text;
				}

				text = text.replace(/```/g, '');
				text = text.replace(/###/g, '');
				uni.setClipboardData({
					data: text,
					success: function() {
						that.$refs.toast.show({
							message: "复制成功"
						});
					},
					complete: function() {
						uni.hideToast();
					}
				});
			},
			uv_video(e, img = [], type = '', api = '') {
				let src = [];
				// if (e?.data && e?.data[0]) {
				// 	src = [e.data[0].url];
				// }
				if (e.type && e.type.includes('video')) {
					src.push({
						url: e.url,
						type: 'video',
					});
				}
				if (e?.videoUrl) {
					src.push({
						url: e.videoUrl,
						type: 'video',
						poster: e.imageUrl
					});
				}
				if (e?.musics) {
					for (var i = 0; i < e.musics.length; i++) {
						src.push({
							url: e.musics[i].videoUrl || e.musics[i].audioUrl,
							type: 'video',
							poster: e.musics[i].imageUrl
						});
					}
				}
				// if(e?.task?.api=='video'){
				// 	src.push({
				// 		url: e.musics[i].videoUrl || e.musics[i].audioUrl,
				// 		type: 'video',
				// 		poster: e.musics[i].imageUrl
				// 	});
				// }
				if (img[0] && type == 'fusion' && api == 'video') {
					let arr = [];
					for (var index = 0; index < img.length; index++) {
						var element = img[index].url;
						arr.push(element);
					}
					src = arr;
				}
				return src;
			},
			uv_image(e, img = [], type = '') {
				let src = [];
				if (e?.data && e?.data[0]) {
					src = [e.data[0].url];
				}
				if (e?.imageUrl) {
					src = [e.imageUrl];
				}
				if (e?.videoFirstFrame) {
					src = [e.videoFirstFrame];
				}
				if (e?.targetImage) {
					src = [e.targetImage];
				}
				if (e?.images) {
					src = e.images;
				}
				if (e?.url) {
					src = [e.url];
				}
				if (e?.musics) {
					for (var i = 0; i < e.musics.length; i++) {
						if (e.musics[i]?.imageUrl) src.push(e.musics[i].imageUrl);

					}
				}
				if (src[0] && img[0] && type != 'fusion') {
					let arr = [];
					for (var index = 0; index < img.length; index++) {
						var element = img[index].url;
						arr.push(element);
					}
					src = src.concat(arr);
				}
				if (img[0] && type == 'fusion') {
					let arr = [];
					for (var index = 0; index < img.length; index++) {
						var element = img[index].url;
						arr.push(element);
					}
					src = arr;
				}
				return src;
			},
			async getWorks() {
				try {
					this.loading = true;
					const res = await getName('flow', {
						custom: {
							auth: true,
							toast: false,
						},
						params: {
							list: 'true',
							pageSize: 3,
							page: 1
						}
					});
					this.work = res;
				} catch (e) {

				}
			},
			async favorites(a) {
				a.favoriteStatus = !a.favoriteStatus;
				favorite({
					id: a._id
				}, {
					custom: {
						auth: true,
						toast: true
					}
				}).then(e => {
					if (e.status) {
						a.favorites = Number(a.favorites || 0) + 1;
					} else {
						a.favorites--;
					}
					a.favoriteStatus = e.status;
					this.$refs.toast.show({
						message: e.status ? '收藏成功' : '取消收藏'
					});
				}).catch(e => {
					console.error(e);
				});
			},
			// 点赞/取消点赞
			async heartlike(comment) {
				try {
					// 先更新UI状态
					comment.likeStatus = !comment.likeStatus;
					comment.likes = comment.likeStatus ? comment.likes + 1 : Math.max(0, comment.likes - 1);

					// 发送请求到后端
					await like({
						id: comment._id
					}, {
						custom: {
							auth: true,
							toast: true
						}
					})
				} catch (e) {
					// 失败则回退状态
					comment.likeStatus = !comment.likeStatus;
					comment.likes = comment.likeStatus ? comment.likes + 1 : Math.max(0, comment.likes - 1);

					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				}
			},
			replaced(text) {
				if (!text) return;
				text =
					'<pre class="text-block"><div class="copy-text cursor-pointer"><span style="font-weight: bold; font-size: 14px; color:#ababab">正向提示词</span>复制</div><div class="content-text">' +
					text;
				if (typeof text !== 'string') {
					text = text[0].text;
				}
				const msgs = text.split(' --');
				if (msgs) {
					text = msgs[0];
				}
				text = text.replace(/(```[\s\S]*?```)/g, '<pre class="code-block">$1</pre>');
				text = text.replace(/(```\b\w+\b)/g,
					'<div class="copy-text"><span style="font-weight: bold; font-size: 15px; color:#ababab">$1</span>复制</div>'
				);
				text = text.replace(/```/g, '');
				text = text.replace(/(###[\s\S]*?\\n)/g, '<span style="font-weight: bold; color:#00000">$1</span>');
				text = text.replace(/(###[\s\S]*?\n)/g, '<span style="font-weight: bold; color:#00000">$1</span>');
				text = text.replace(/###/g, '');
				text = text.replace(/\\n/g, "<br>");
				text = text.replace(/\n/g, "<br>");
				text = text.replace(/<article[^>]*>/g, '<p>').replace(/<section[^>]*>/g, '<p>');
				text = text + '</div></div></pre>';
				return text;
			},
			copyCode(text) {
				var that = this;
				const target = event.target;
				const classList = target.classList;
				if (classList && classList.contains('copy-text')) {
					const clas = target.parentNode;
					let first = {};
					if (clas.firstChild) {
						first = clas.firstChild;
						clas.removeChild(clas.firstChild);
					}
					let text = clas.innerText;
					if (first) {
						clas.prepend(first);
					}
					that.copy(text);
				}
			},
			async getVuex(i = '') {
				var params = {
					type: 'fusion',
				};
				if (i) {
					params['id'] = i;
				}
				try {
					const e = await getScroll({
						custom: {
							auth: true,
							toast: false,
						},
						params: params
					});
					this.data.push(e);
					this.userinfo = this.vuex_user;
					this.taskid = e._id;
				} catch (error) {
					console.log(error);
				}
			},
			ress(a) {
				this.loading = true;
				getName('flow', {
					custom: {
						auth: true,
						toast: false
					},
					params: {
						id: a
					}
				}).then(e => {
					if (e.data[0] && e.data[0].content != []) {
						this.data = e.data;
						this.userinfo = e.data[0].userinfo[0];
						this.taskid = e.data[0]._id;
					}
					this.loading = false;
				}).catch(e => {
					this.loading = false;
				});
			},
			times(time) {
				return " -- " + uni.$uv.timeFrom(new Date(time).getTime()) + " -- ";
			},
			cTime(time1, e, index) {
				if (index == 0) {
					return true;
				}
				if (index == Number(e.length - 1)) {
					return false;
				}
				var time2 = e[index + 1] && e[index + 1].createdAt;
				if (!time1 || !time2) {
					return false;
				}
				var date1 = new Date(time1).getTime();
				var date2 = new Date(time2).getTime();
				var difference = Math.abs(date2 - date1);
				var minutes = Math.ceil(difference / (1000 * 60));
				if (minutes > 20) {
					return true;
				} else {
					return false;
				}
			},
			routed(url) {
				uni.$uv.route({
					url: url
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.index-details {
		height: 100%;
		overflow-x: hidden;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		user-select: text;

		::v-deep .el-image__placeholder {
			min-width: 120px;
			min-height: 120px;
			background: url('@/static/loading.gif') no-repeat 50% 50% !important;
			background-size: 50% !important;
		}

		.contents-conter {
			width: auto;
			display: flex;
			justify-content: center;
			align-items: self-start;
			padding: 0px 10px;
		}

		.contents-details {
			display: flex;
			justify-content: space-between;
			align-items: self-start;
			max-width: 1500px !important;

			/* 确保子元素等高 */

			::v-deep .code-block {
				background-color: #f8f8f8;
				border: 1px solid #ddd;
				border-radius: 10px;
				overflow: hidden;
				margin-bottom: 10px;
				white-space: pre-wrap;
				word-break: break-all;
				font-family: 'Courier New', Courier, monospace;
				font-size: 14px;
			}

			::v-deep .text-block {
				background-color: #f8f8f8;
				border: 1px solid #ddd;
				border-radius: 10px;
				overflow: hidden;
				margin-bottom: 10px;
				white-space: pre-wrap;
				word-break: break-all;
			}

			::v-deep .copy-text {
				padding: 8px 10px;
				display: flex;
				justify-content: space-between;
				margin-bottom: 5px;
				background-color: #E5E7ED;
			}

			::v-deep .content-text {
				padding: 0px 10px 10px;
			}

			::v-deep .copy-text:hover {
				color: #409EFF;
			}

			.middle-reht {
				width: 48%;
				// min-width: 350px;
				display: flex;
				flex-direction: column;
				/* 改为自适应 */
				border-radius: 20px;
				border: 1px solid #eee;
				padding: 4px 10px;
				margin: 3px 0px 0px;

				&view {
					flex: 1;
					/* 轮播区域填充剩余空间 */
					display: flex;
					flex-direction: column;
				}

				::v-deep .uni-video-control-button-play {
					background-color: #000;
					color: #000;
				}

				.indicator_ss {
					display: flex;
					// justify-content: center;

					.indicator__dot {
						height: 10px;
						width: 10px;
						border: 2px solid #ddd;
						background-color: rgba(0, 0, 0, 0.3);
						border-radius: 50%;
						margin: 0 5px;
						margin-top: 10px;
						transition: background-color 0.3s;
						cursor: pointer;
					}

					.indicator__dot--active {
						border: 2px solid #ddd;
						background-color: rgba(255, 255, 255, 1);
					}
				}
			}

			.middle-reht_Os {
				width: 100%;
			}

			.middle-dhrds {
				width: 32.5%;
				margin: 3px 0px 0px;
				border-radius: 10px;
				display: flex;
				flex-direction: column;

				.acting {
					background-color: #fff;
					padding: 6px 10px;
					width: 30%;
					color: #819CFF;
					font-weight: bold;
					border-bottom-right-radius: 10px;
					border-bottom-left-radius: 10px;
				}

				.acted {
					// background-color: #fff;
					padding: 6px 10px;
					width: 30%;
					color: #666;
					border-top-left-radius: 10px;
				}
			}

			.middle-dhrds_Os {
				width: 100%;
			}

			.middle-treef {
				width: 16%;
				height: calc(100vh - 60px);
				margin: 3px 0px 0px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.middle-card {
					// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
					// background-color: #F4F5F9;
					border-radius: 5px;
					border: 1px solid #eeeeee;
					overflow: hidden;
					color: #303133;
					transition: .3s;
					padding: 10px;

					.item_box {
						display: flex;
						justify-content: space-around;
						align-items: center;

						.item_dfgd {
							display: flex;
							justify-content: center;
							flex-direction: column;
							align-items: center
						}
					}
				}

				.middle-adv {
					border-radius: 5px;
					border: 1px solid #eeeeee;
					overflow: hidden;
					color: #303133;
					transition: .3s;
					padding: 10px;
				}
			}

			.middle-treef_Os {
				width: 100%;
			}
		}

		.con_waterfall {
			display: flex;
			justify-content: center;
			align-items: self-start;
			padding: 10px;
		}

		.btn {
			width: auto;
			margin-left: 10px;
			font-weight: bold;
			border: 1px solid #DDDDDD;
			border-radius: 3px;

		}

		.btn_hover {
			border: 1px solid #C6E2FF;
			background-color: ECF5FF;
		}
	}

	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}

	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}

	.rating {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// border: 1px solid #eee;
		background-color: #f5f7fa;
		padding: 2px 10px;
	}

	.comment-page_dummy {
		// background-color: #f5f7fa;
		box-sizing: border-box;
		margin: 20px 10px 0px;
		padding: 10px 0px;
		border-top: 10px solid #F1F1F1;

		.page-header {
			display: flex;
			align-items: center;
			margin-bottom: 6px;

			.title {
				font-size: 15px;
				font-weight: bold;
				color: #333;
			}

			.count {
				margin-left: 7px;
				font-size: 12px;
				color: #999;
			}
		}

		.comment-input-box {
			display: flex;
			align-items: center;
			background: #fff;
			border: 1px solid #eee;
			border-radius: 8px;
			padding: 5px;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);

			.user-avatar {
				width: 35px;
				height: 35px;
				border-radius: 50%;
				margin-right: 10px;
				background-color: #eee;
			}

			.input {
				flex: 1;
				height: 35px;
				padding: 0 10px;
				font-size: 14px;
				background: #f8f8f8;
				border-radius: 6px;
			}

			.submit-btn {
				width: 55px;
				height: 30px;
				line-height: 30px;
				margin-left: 10px;
				background: #007aff;
				color: white;
				font-size: 13px;
				border-radius: 6px;
				transition: all 0.3s;

				&.disabled {
					background: #cccccc;
					opacity: 0.7;
				}
			}
		}
	}

	.dummyPc {}

	.dummyOs {}
</style>